<template>
	<view>
		<u-tabs :list="cpcategory" v-if="cpcategory.length" lineWidth="328rpx" lineColor=" rgb(255, 83, 83)" :activeStyle="{
		               color: '#000',
		               fontWeight: '600',
		              
		           }" :inactiveStyle="{
		              color: '#000',
		              fontWeight: '300',
		              
		           }" :scrollable="false" itemStyle="padding-left: 15px; padding-right: 15px; width: 50%;height:88rpx;"
			@change="tabchange"></u-tabs>

		<view class="list-cp">
			<view class="item-cp ss-flex" v-for="(item,index) in state.data" :class="{active:index===0}">
				<view class="title">
					{{item.title}}
				</view>
				<view class="number-item ss-flex">
					<view class="item" v-for="i in item.number">
						{{i}}
					</view>

				</view>
			</view>
		</view>
		<u-loadmore :status="state.pageData.status" font-size="26rpx" icon-size="36rpx" margin-top="30rpx" />
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app'
	import LC from '@/LC'
	let state = reactive({

		pageData: {
			page: 1,
			limit:15,
			status: 'loading'
		},
		tabindex: 0,

		data: []
	})


	let cpcategory = computed(() => LC.$store('app').cpcategory)
	onReachBottom(() => {
		onbottom()
	})

	onLoad(({
		type
	}) => {

		onbottom()

	})

	function onbottom() {

		let {
			status,
			load,
			limit,
			page
		} = state.pageData

		if (status != 'nomore' && !load) {

			getmsg()


		}
	}

	function tabchange({
		index
	}) {
		state.tabindex = index
		state.pageData = {
			page: 1,
			limit:15,
			status: 'loading'
		}
		state.data = []


		getmsg()
	}

	function getmsg() {

		LC.$api.home.numberlist({
				...state.pageData,
				type: cpcategory.value[state.tabindex].id
			})
			.then(({
				res,
				data
			}) => {


				state.data = [...state.data, ...data.data]

				if (data.data.length < state.pageData.limit) {
					state.pageData.status = 'nomore'
					return
				}


				state.pageData.status = 'loadmore'
				state.pageData.page += 1

			})

	}
</script>

<style lang="scss" scoped>
	.item-cp {
		margin-bottom: 24rpx;
		height: 88rpx;
		background: #fff;
		box-shadow: 0px 0px 8rpx 0px rgba(23, 143, 255, .17);
		border-radius: 14rpx;
		padding: 0 30rpx;
		margin-bottom: 20rpx;

		&.active {
			.number-item {
				margin-left: auto;
			
				.item {
				background: red;
			color: #fff;
			border: 1px solid red;	
				}}
			
		}

		.title {
			font-size: 32rpx;
		}

		.number-item {
			margin-left: auto;

			.item {
				margin-left: 10rpx;

				
				width: 50rpx;
				height: 50rpx;
				border: 2rpx solid #747679;
				border-radius: 25rpx;
				line-height: 50rpx;
				text-align: center;

			}
		}
	}
</style>